<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>历史订单详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/1px.css" />
    <link rel="stylesheet" type="text/css" href="../css/weui.min.css" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      #app {
        font-size: 14px;
        box-sizing: border-box;
        padding-bottom: 50px;
        -webkit-overflow-scrolling: touch;
      }
      
      .order {
        padding: 10px;
      }
      
      .goods-item div {
        align-items: center;
      }
      
      .goods-item__top {
        padding-top: 10px;
      }
      
      .img-wrapper {
        flex: 0 1 90px;
        text-align: center;
      }
      
      .goods-info {
        overflow: hidden;
      }
      
      .goods-info div {
        margin: 3px 0;
      }
      
      .goods-info-right {
        flex: 0 1 120px;
        text-align: center;
        overflow: hidden;
      }
      
      .goods-info-right div {
        margin: 3px 0;
      }
      
      .goods-item__bottom {
        padding-bottom: 5px;
      }
      
      .goods-item_total {
        padding-left: 10px;
      }
      
      .goods-item_op {
        flex: 0 1 120px;
        text-align: center;
      }
      
      .goods-item_op button {
        width: 70%;
      }
      
      .mask {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        font-size: 18px;
        color: #999;
        text-align: center;
        padding-top: 50px;
      }
      /**/
     .bgGray{
      	background-color: #F8F8F8;
      }
    </style>
  </head>

  <body>
    <script src="../js/mui.min.js"></script>
    <script type="text/javascript">
      mui.init();
    </script>

    <div class="list" id="app">
      <div class="mask" v-show="isInit">加载中...</div>
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <div class="vux-1px-b order">发货单号: <span v-text="operationId"></span></div>
          <div class="goods-item" v-for="(item, index) in operationVo.goods" :key="index" :class="{'bgGray':index%2===0}">
            <div class="weui-flex">
              <div class="weui-flex__item weui-flex" class="goods-item__top" style="padding-top: 10px;">
                <div class="weui-flex__item img-wrapper">
                  <img :src="item.cutImg | fixUrl" style="width: 70px; height:70px;" alt="" />
                </div>
                <div class="weui-flex__item goods-info">
                  <div>名称:<span v-text="item.goodsName"></span></div>
                  <div>货品ID:<span v-text="item.goodsId"></span></div>
                  <!--<div>门店库存:<span v-text="item.shopAmount"></span></div>-->
                </div>
              </div>
              <div class="weui-flex__item goods-info-right">
                <div style="color:red;" v-show="item.pickingAmount !== item.receivingAmount">误差:<span>{{item.pickingAmount - item.receivingAmount }}</span></div>
                <div>配送数:<span v-text="item.pickingAmount"></span></div>
                <div>入库数:<span v-text="item.receivingAmount"></span></div>
              </div>
            </div>
            <div class="weui-flex goods-item__bottom">
              <div class="weui-flex__item goods-item_total">
                申请进货数量:<span v-text="item.applyAmount"></span>
              </div>
              <div class="weui-flex__item goods-item_op">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../config.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.plusReady(function() {
        plus.webview.currentWebview().setStyle({
          scrollIndicator: 'none'
        });
        var vm = new Vue({
          el: '#app',
          data: {
            currentShopObj: {},
            applyId: '',
            operationVo: {},
            isInit: true
          },
          created: function() {
            this.receiveParmas();
            this.checkApply();
          },
          mounted: function() {
            this.fixScroll();
          },
          methods: {
            receiveParmas: function() {
              var self = plus.webview.currentWebview();
              this.operationId = self.operationId;
              this.currentShopObj = self.currentShopObj;
            },
            fixScroll: function() {
              mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005,
                brounce: true,
                scrollY: true
              });
            },
            checkApply: function() {
              config.ajax({
                url: config.basePath + '/delivery/checkoperationbyid.do',
                headers: {
                  'Content-Type': 'application/json'
                },
                data: {
                  operationId: this.operationId
                },
                crossDomain: true,
                dataType: 'json',
                type: 'POST',
                success: function(res) {
                  if(res.result === 1) {
                    vm.operationVo = res.operationVo
                  }
                  setTimeout(function() {
                    vm.isInit = false;
                  }, 200);
                }
              })
            },
            back: function() {
              mui.back();
            }
          },
          filters: {
            fixUrl: function(val) {
              if(val && val.indexOf('http://') === -1) {
                return config.imgPath + val
              }
              return val
            }
          }
        })
      });
    </script>
  </body>

</html>